<template>
    <div class="edit-plugin-comp">
        <el-dialog
                :title="title"
                :visible.sync="show"
                width="30%"
                :append-to-body="true"
                :before-close="handleClose">
            <el-upload
                    class="upload-plugin-file"
                    drag
                    :action="getUploadUrl"
                    multiple
                    :headers="headers"
                    :on-success="uploadResult">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <div style="margin-top: 10px">
                <el-input v-model="plugin.name" placeholder="请输入插件名称"></el-input>
            </div>
            <div style="margin-top: 10px">
                <el-input v-model="plugin.version" placeholder="请输入插件版本"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "EditPluginComp",
        props: {
            title: String,
            show: Boolean
        },
        data() {
            return {
                headers: {token: localStorage.getItem('token')},
                plugin: {
                    name: '',
                    version: '',
                    pluginFileName: null,
                    logoFileName: null,
                },
                imageUrl: null,
            }
        },
        methods: {
            handleClose(done) {
                this.$emit('before-close', done)
            },
            uploadResult(res, file, fileList) {
                if (res.code === -1) {
                    this.$router.replace('/login')
                    return
                }
                if (res.code === 1) {
                    if (res.data.endsWith('.apk')) {
                        this.plugin.pluginFileName = res.data
                    }
                    if (res.data.endsWith('.jpg') || res.data.endsWith('.png')) {
                        this.plugin.logoFileName = res.data

                    }
                    this.$Toast.successToast(res.msg)
                }
            },
            save() {
                this.$emit('save', this.plugin)
            },
            getUploadUrl() {
                const env = process.env.NODE_ENV
                if (env === 'production') {
                    return '/file/upload'
                } else {
                    return '/api/file/upload'
                }
            }
        }
    }
</script>

<style scoped>
    .edit-plugin-comp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 400px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

</style>